<template>
  <div
    class="price"
    :style="{color:color}"
  >
    <span
      class="price-currency"
      v-if="currency"
    >{{currency}}</span>
    <span class="price-integer">{{price.integer}}</span>
    <span
      class="price-decimal"
      v-if="decimal>0"
    >{{price.decimal}}</span>
  </div>
</template>

<script>
export default {
  name: 'Price',
  props: {
    currency: {
      type: [String, Boolean],
      default: '¥'
    },
    decimal: {
      type: Number,
      default: 2
    },
    value: {
      type: [Number, String]
    },
    color: {
      type: String
    }
  },
  computed: {
    price () {
      let priceNumber = this.value
      if (typeof this.value === 'string') {
        priceNumber = priceNumber.replace(/[^\d.]/gi, '')
      }
      var price = parseFloat(priceNumber).toFixed(this.decimal)
      var priceArr = price.toString().split('.')

      return {
        integer: priceArr[0],
        decimal: priceArr[1]
      }
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.price {
  padding-left: 3px;
  display: inline-flex;
  align-items: baseline;
  &-currency {
    font-size: 80%;
  }
  &-integer {
    font-size: 140%;
    font-weight: normal;
    font-family: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial, sans-serif;
  }
  &-decimal {
    font-size: 80%;
    font-family: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial, sans-serif;
    &::before {
      content: ".";
    }
  }
}
</style>
